import React from 'react'
import { Row, Col,Input,Select,Button,Layout, Table, Tag, Space,Pagination } from 'antd';
import { OrderedListOutlined, SearchOutlined } from '@ant-design/icons';
import './OrdersList.css'
import axios from 'axios';
import resolve from 'resolve';

const { Header, Footer, Content } = Layout;
const { Option } = Select;
const columns = [
  {
    title: '订单号',
    dataIndex: 'ord_num',
    key: 'ord_num',
    render: text => <a>{text}</a>,
  },
  {
    title: '下单时间',
    dataIndex: 'ord_buytime',
    key: 'ord_buytime',
  },
  {
    title: '收货人',
    dataIndex: 'user_username',
    key: 'user_username',
  },
  {
    title: '手机',
    key: 'tel',
    dataIndex: 'tel',
  },
  {
    title: '取货门店',
    key: 'adrss',
    dataIndex: 'adrss',
  },
  {
    title: '商品名称',
    key: 'shop_id',
    dataIndex: 'shop_id',
  },
  {
    title: '商品价格',
    key: 'jia_ge',
    dataIndex: 'jia_ge',
  },
  {
    title: '数量',
    key: 'num',
    dataIndex: 'num',
  },
  {
    title: '实付价格',
    key: 'shifu_jiage',
    dataIndex: 'shifu_jiage',
  },
  {
    title: '操作状态',
    key: 'ord_zstate',
    dataIndex: 'ord_zstate',
  },
  {
    title: '操作',
    key: 'action',
    render: (text, record) => (
      <Space size="middle">
        <Button type="default">查看</Button>
      </Space>
    ),
  },
];
function handleChange(value) {
  // console.log(`selected ${value}`);
}




const data = [];
for (let i = 0; i < 46; i++) {
  data.push({
    key: i,
  });
}

  class OrdersList extends React.Component {
    state = {
      selectedRowKeys: [], // Check here to configure the default column
      loading: false,
    };

    start = () => {
      this.setState({ loading: true });
      // ajax request after empty completing
      setTimeout(() => {
        this.setState({
          selectedRowKeys: [],
          loading: false,
        });
      }, 1000);
    };

    onSelectChange = selectedRowKeys => {
      console.log('selectedRowKeys changed: ', selectedRowKeys);
      this.setState({ selectedRowKeys });
    };




    // constructor(props){
    //   super(props);
    //   this.state={
    //     data:[],
    //     page:1, //显示页
    //     pagesize:2,//显示的条数
    //     count:0,// 总条数

    //   }
    // }
    componentDidMount(){
      console.log(111)
      this.getData();
    }
    //获取服务器数据
     getData=()=>{
       console.log(2222)
      let api='http://123.57.67.148:3000/mock/609/getData';
      axios.get(api).then(res=>{
        console.log(res.data)
        const result = res.data;
        // const result = JSON.parse(res.data);

          this.setState({
            data:result
          })

      }).catch(err=>{
        console.log(err)
      })

    }
    render(){
      // const {data}= this.state;
      //表格

      const {data, loading, selectedRowKeys } = this.state;
      const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange,
    };
    const hasSelected = selectedRowKeys.length > 0;


    return (<div className="orderMain">
               <Row>
      <Col span={4}>
          <Input placeholder="请输入订单号" />
      </Col>
      <Col span={4}><Input placeholder="收货人" /></Col>
      <Col span={4}>
      <Select defaultValue="订单状态请选择" onChange={handleChange}>
        <Option value="待付款">买家正在待付款</Option>
        <Option value="待发货">卖家正在待发货</Option>
        <Option value="待核销">卖家正在待核销</Option>
        <Option value="已删除">订单状态已删除</Option>
      </Select>
      </Col>
      <Col span={4}>
      <Button icon={<SearchOutlined />}>搜索</Button>
    </Col>
    </Row>
    <div style={{ marginBottom: 16 }}>
          <Button type="primary" onClick={this.start} disabled={!hasSelected} loading={loading}>
            刷新
          </Button>
          <span style={{ marginLeft: 8 }}>
            {hasSelected ? `Selected ${selectedRowKeys.length} items` : ''}
          </span>
        </div>
        <Table rowSelection={rowSelection} columns={columns} dataSource={data} />
        </div>
    )
  }
}

export default OrdersList
